<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>聚类统计</title>
    <link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">
    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            font-size: 12px;
        }

        #map1 {
            width: 100%;
            height: 100%;
            float: left;
            border-right: 1px solid #000000;
        }
    </style>
   
    <script src="./js/ol.js"></script>
<!--    <script src="http://localhost/olapi/lib/ol/Lang/zh-CN.js"></script>-->
    <script src="./js/jquery.min.3.2.1.js"></script>
    <script>
        var map1, vectors;
        ol.Feature.Vector.style['default']['strokeWidth'] = '2';
        $(function () {
            var bounds = new ol.Bounds(
                73.45100463562233, 18.16324718764174,
                134.97679764650596, 53.531943152223576
            );
            var options = {
                controls: [],
                maxExtent: bounds,
                maxResolution: 0.2403351289487642,
                projection: "EPSG:4326",
                units: 'degrees',
                view: view,
                layers: [baseLayer, vectorLayer],
            };
            var view = new ol.View({center: [0, 0], zoom: 4}),
            // vectorLayer = new ol.layer.Vector({source: new ol.source.Vector()}),
            //     baseLayer = new ol.layer.Tile({source: new ol.source.OSM()}),
            //     map1 = new ol.Map({
            //         target: 'map1',
            //         view: view,
            //         layers: [baseLayer, vectorLayer],
            //     });

            map1 = new ol.Map('map1', options);

            map1.addLayer(getWms("china"));
            map1.addControl(new ol.Control.Zoom());
            map1.addControl(new ol.Control.Navigation());
            map1.zoomToExtent(bounds);

            addCluster();
        });

        function getWms(layer) {
            return new ol.Layer.WMS(
                "Geoserver layers - Tiled",
                "http://localhost:8081/geoserver/lzugis/wms",
                {
                    "LAYERS": layer,
                    "STYLES": '',
                    format: 'image/png'
                },
                {
                    buffer: 0,
                    displayOutsideMaxExtent: true,
                    isBaseLayer: true,
                    yx: {'EPSG:4326': true}
                }
            );
        }

        function addCluster() {
            var style = new ol.Style({
                fillColor: "#ffcc66",
                strokeColor: "#ff9933",
                strokeWidth: 2,
                label: "${count}",
                fontColor: "#333333",
                fontFamily: "sans-serif",
                fontWeight: "bold"
            }, {
                rules: [
                    new ol.Rule({
                        minScaleDenominator: 100000000,
                        symbolizer: {
                            pointRadius: 7,
                            fontSize: "9px"
                        }
                    }),
                    new ol.Rule({
                        maxScaleDenominator: 100000000,
                        minScaleDenominator: 50000000,
                        symbolizer: {
                            pointRadius: 10,
                            fontSize: "11px"
                        }
                    }),
                    new ol.Rule({
                        maxScaleDenominator: 50000000,
                        symbolizer: {
                            pointRadius: 13,
                            fontSize: "13px"
                        }
                    })
                ]
            });
            var data = [{name: "乌鲁木齐", x: 87.5758285931, y: 43.7822116460, count: 10},
                {name: "拉萨", x: 91.1629975040, y: 29.7104204643, count: 30},
                {name: "西宁", x: 101.797302689, y: 36.5936423859, count: 50},
                {name: "兰州", x: 103.584297498, y: 36.1190864503, count: 70},
                {name: "成都", x: 104.035508297, y: 30.7141790950, count: 90},
                {name: "重庆", x: 106.519115206, y: 29.4789248520, count: 60},
                {name: "贵阳", x: 106.668071385, y: 26.4573115457, count: 20}];
            var features = new Array();
            for (var i = 0; i < data.length; i++) {
                features[i] = new ol.Feature.Vector(
                    new ol.Geometry.Point(data[i].x, data[i].y),
                    {
                        count: data[i].count,
                        name: data[i].name
                    }
                );
            }
            var clusterLayer = new ol.Layer.Vector("Points", {
                styleMap: new ol.StyleMap(style)
            });
            clusterLayer.addFeatures(features);
            map1.addLayer(clusterLayer);
        }
    </script>
</head>
<body>
<div id="map1"></div>
</body>
</html>